<template>
  <table class="publish-table">
    <tbody>
      <!-- <tr>
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title>
              进行中xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            </template>
            进行中xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="50" status="active" />
        </td>
        <td class="handle">
          <publish-button-start id="asdhas" />
          <publish-button-invalid id="asdhas" />
        </td>
      </tr>
      <tr>
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title>
              重新再来我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我
            </template>
            重新再来我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="50" status="active" />
        </td>
        <td class="handle">
          <publish-button-restart id="asdhas" />
          <publish-button-invalid id="asdhas" />
        </td>
      </tr>
      <tr>
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title> 失败的xxxxxxx </template>
            失败的xxxxxxx
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="70" status="exception" />
        </td>
        <td class="handle">
          <publish-button-stop id="xx" />
          <publish-button-invalid id="asdhas" />
        </td>
      </tr>
      <tr>
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title> xxxxxxx </template>
            xxxxxxx
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="100" />
        </td>
        <td class="handle">
          <publish-button-invalid id="asdhas" />
        </td>
      </tr>
      <tr>
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title> xxxxxxx </template>
            xxxxxxx
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="50" :show-info="false" />
        </td>
        <td class="handle">
          <publish-button-invalid id="asdhas" />
        </td>
      </tr> -->
      <tr v-for="file in data">
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title> {{ file.name }}.{{ file.type }} </template>
            {{ file.name }}.{{ file.type }}
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="file.percent" :status="file.status" />
        </td>
        <td class="handle">
          <!-- <publish-button-start id="asdhas" /> -->
          <publish-button-invalid
            :id="file.id"
            v-if="file.isHistory && !file.status"
            @operated="onInvalid(file.id)"
          />
          <!-- ||
          (file.percent === 100 && file?.response?.success) -->
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import PublishButtonInvalid from './publish-button-invalid.vue'
import PublishButtonRestart from './publish-button-restart.vue'
import PublishButtonStart from './publish-button-start.vue'
import PublishButtonStop from './publish-button-stop.vue'
defineProps({ data: { type: Object, default: () => [] } })
let emit = defineEmits(['invalid'])

function onInvalid(id) {
  emit('invalid', id)
}
</script>
<style lang="less" scoped>
.publish-table {
  width: 100%;
  td {
    padding: 0 10px;
  }
  .filename {
    max-width: 118px;
    min-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .progress {
    min-width: 118px;
    max-width: 160px;
    :deep(.ant-progress) {
      margin-bottom: 0;
    }
  }
  .handle {
    white-space: nowrap;
  }
}
</style>
